.footer {
    background-color: #f8f8f8;
    width: 100%;
}

ul, li {
    list-style-type: none;
}

.f-container {
    width: 1200px;
    margin: 0 auto;
}

/*footer的tabs标签栏*/
.f-container > .f-tabs {
    width: 100%;
    text-align: center;
}

.f-tabs > .f-links {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 36px 0;
    text-align: center;
    width: 100%;
}

.f-links > .links-list {
    float: left;
    font-size: 14px;
    color: #111;
}

.f-links > .links-grep {
    float: left;
    padding: 0 24px;
}

.f-links > .links-list:hover {
    color: #ff1268;
    text-decoration: underline;
    cursor: pointer;
}

/*footer的info信息栏*/
.f-info {
    padding-bottom: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.f-info:after {
    display: block;
    clear: both;
    visibility: hidden;
    height: 0;
    overflow: hidden;
    content: '.';
}

/*info信息栏左侧部分*/
.f-info > .info-left {
    float: left;
    margin-right: 100px;
}

/*info信息栏的logo图标*/
.info-left > .info-logo {
    text-decoration: none;
    float: left;
    margin-top: 20px;
}

.info-left > .info-logo:after {
    display: block;
    clear: both;
    visibility: hidden;
    height: 0;
    overflow: hidden;
    content: '.';
}

/*info信息栏的qrcode二维码*/
.info-left > .info-qrcode {
    float: left;
    width: 87px;
    text-align: center;
    margin-left: 40px;
}

.info-qrcode > img {
    display: block;
    width: 87px;
    height: 87px;
    margin-bottom: 8px;
    border: 1px solid #686767;
}

.info-qrcode > span {
    font-size: 14px;
    color: #111;
    text-align: center
}

/*info信息栏右侧部分*/
.f-info > .info-right {
    float: left;
}

.info-contact {
    margin-bottom: 10px;
}

.info-contact:after {
    display: block;
    clear: both;
    visibility: hidden;
    height: 0;
    overflow: hidden;
    content: '.';
}

.info-contact > a {
    float: left;
    display: block;
    width: 98px;
    height: 27px;
    line-height: 27px;
    text-align: center;
    background-color: #ff1268;
    color: #fff;
    font-size: 14px;
    border-radius: 20px;
    text-decoration: none;
}

.info-list {
    padding-bottom: 6px;
}

.info-list:after {
    display: block;
    clear: both;
    visibility: hidden;
    height: 0;
    overflow: hidden;
    content: '.';
}

.info-list li {
    float: left;
    font-size: 13px;
    color: #111;
}

.info-list .list-grep {
    padding: 0 15px;
}

